<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="学生学号">
      <el-input v-model="form.student_id" disabled />
    </el-form-item>
    <el-form-item label="课程名">
      <el-select v-model="form.course_name" @change="getCourseInfo" disabled >
        <el-option v-for="cls in courses" :key="cls.course_id" :label="cls.course_name" :value="cls.course_id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="平时成绩">
      <el-input v-model="form.usual_score" />
    </el-form-item>
    <el-form-item label="期末成绩">
      <el-input v-model="form.final_score" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm() ">确认修改</el-button>
      <el-button @click="closeDialog() ">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import ScoreApi from '@/api/ScoreApi';

export default {
  props: {
    currentScore: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        student_id: '',
        course_name: '',
        usual_score: '',
        final_score: '',
        course_id:'',
      },
      courses: [] // 课程列表

    };
  },
  methods: {
    submitForm() {
      this.$emit('submit-form',this.form);
    },
    closeDialog() {
      this.$emit('close-dialog');
    },
    async fetchCourses() {
      try {
        //获得一个课程
        const response = await ScoreApi.getCoursesForm();
        this.courses = response.data.data || response.data;
        console.log(this.courses);
      } catch (error) {
        console.error("课程信息获取错误:", error);
      }
    }
  },
  watch: {
    // 监听父组件传入的currentScore变化
    currentScore: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          // 将父组件传入的成绩数据填充到表单中
          this.form = {
            student_id: newVal.student_id,
            course_name: newVal.course_name,
            usual_score: newVal.usual_score,
            final_score: newVal.final_score,
          }
        }
      }
    }
  },
  created() {
    this.fetchCourses();
  }
};
</script>
